<template>
	<yd-flexbox class="housenav">
		<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,1)"><span class="hntext" id="blocks">位置区域</span>
			<img v-if="accordionDH" src="../assets/img/icon_drop_down.png" />
			<img v-if="!accordionDH" src="../assets/img/icon_drop_top.png" />
		</yd-flexbox-item>
		<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,3)">更多筛选

			<img v-if="moreDH" src="../assets/img/icon_drop_down.png" />
			<img v-if="!moreDH" src="../assets/img/icon_drop_top.png" />
		</yd-flexbox-item>
		<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,4)"><span class="hntext" id="Recommen">推荐排序</span>

			<img v-if="RecommendDH" src="../assets/img/icon_drop_down.png" />
			<img v-if="!RecommendDH" src="../assets/img/icon_drop_top.png" />
		</yd-flexbox-item>
		<div ref="accordionF" class="housenav-accordion">
			<div class="accordionDH-box" v-if="!accordionDH">
				<div class="myaddress" v-show="!accordionDH" @click="getlat()">我的附近</div>
				<yd-accordion class="addressAcc" accordion v-show="!accordionDH">
					<yd-accordion-item v-for="blocksitem,key in blocksData" :key="key" :title="blocksitem.name">
						<yd-flexbox direction="vertical">
							<yd-flexbox-item v-for="itemresult,key in blocksitem.result" :key="key" @click.native="blocksLLat(itemresult.areaId,itemresult.lat,itemresult.lng,itemresult.name,1)">{{itemresult.name}}</yd-flexbox-item>
						</yd-flexbox>
					</yd-accordion-item>
				</yd-accordion>
			</div>
			<!--入住时间-->
			<div v-if="!tiemDH">

			</div>
			<!--更多筛选-->
			<div class="moreDH" v-show="!moreDH">
				<!--价格-->
				<div class="more-box price">
					<div class="moreDH-title">价格</div>
					<div class="block">
						<el-slider class="my-el-slider" v-model="value9" range :max="maxnum" :show-tooltip="false" :change="changeFUN()">
						</el-slider>
						<div style="display: -webkit-flex;display: flex;justify-content: space-between;"><span class="pricemin">￥0</span><span class="pricemax">不限</span></div>
					</div>
				</div>
				<!--出租类型-->
				<div class="more-box housetype">
					<div class="moreDH-title">出租类型</div>
					<div class="list-box mygriditem">
						<div class="list-item housetype-item">

							<span class="minsu " @click="housetypeitem(0)"></span>
							<span class="leasetype_span">整租</span>
						</div>
						<div class="list-item">

							<span class="danjian " @click="housetypeitem(1)"></span>
							<span class="leasetype_span">合租</span>
						</div>
					</div>

				</div>

				<!--户型-->
				<div class="more-box layout">
					<div class="moreDH-title">户型</div>
					<div class="tags">
						<span @click="layoutitem(0)" class="layout-item">一居</span>
						<span @click="layoutitem(1)" class="layout-item">二居</span>
						<span @click="layoutitem(2)" class="layout-item">三居</span>
						<span @click="layoutitem(3)" class="layout-item">四居</span>
						<span @click="layoutitem(4)" class="layout-item">不限</span>
					</div>
				</div>

				<!--特色标签-->
				<div class="more-box tags">
					<div class="moreDH-title">特色标签</div>
					<div class="tags">
						<span v-for="tagsitems,key in tagsData" :key="key" @click="tagsitem(key)" class="layout-item tagsitem">{{tagsitems.content}}</span>
					</div>
				</div>
				<!--设施-->
				<div class="more-box tags">
					<div class="moreDH-title">设施</div>
					<div class="listtags5-box">
						<div class="listtags5-item hsc-list" v-for="Amenityitem,key in AmenityData" :key="key" @click="Amenityitemclick(key)">

							<img class="hscl-icon" v-if="Amenityitem.grayIcon.indexOf('?')==-1" :src="Amenityitem.grayIcon+'?imageslim'" />
							<img class="hscl-icon" v-else :src="Amenityitem.grayIcon" />
							<p style="margin-top: .1rem;">{{Amenityitem.amenityName}}</p>
						</div>
					</div>
				</div>

				<!--底部按钮-->
				<div class="moreDH-bottom">
					<span class="mb-btn mb-btn1" @click="morecolse()">取消</span>
					<span class="mb-btn mb-btn2" @click="moreok()">确认</span>
				</div>

			</div>
			<!--推荐排序-->
			<div v-if="!RecommendDH">
				<div @click="RecommendDHitemclick(0)" class="RecommendDH-item"><span>推荐排序</span>
					<yd-icon name="checkoff" style="display: none;"></yd-icon>
				</div>
				<div @click="RecommendDHitemclick(1)" class="RecommendDH-item"><span>租金从高到低</span>
					<yd-icon name="checkoff" style="display: none;"></yd-icon>
				</div>
				<div @click="RecommendDHitemclick(2)" class="RecommendDH-item"><span>租金从低到高</span>
					<yd-icon name="checkoff" style="display: none;"></yd-icon>
				</div>
			</div>
		</div>
	</yd-flexbox>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import Swiper from "../assets/libs/swiper.min.js";
	export default {
		name: "ScreenNav",
		data() {
			var that = this;
			return {
				cityId: that.$parent.cityId,
				accordionDH: true,
				tiemDH: true,
				moreDH: true,
				RecommendDH: true,
				//				地理筛选
				blocksData: [],
				//				标签筛选
				tagsData: [],
				//				设施筛选
				AmenityData: [],
				//				更多推荐
				value9: [0, 3000],
				maxnum: 3000,
				pands: 0,
			}
		},
		monuted() {

			var that = this;
			that.accordionDH = true;
			that.tiemDH = true;
			that.moreDH = true;
			that.RecommendDH = true;
			that.$refs.accordionF.style.animation = "0.1s ease both accordionD";
		},
		computed: {
			...mapGetters([
				'source',
				'version'
			])
		},
		methods: {
			//			价格改变
			changeFUN() {
				var that = this;
				if(that.value9[1] == 3000) {
					$(".pricemax").html("不限");
				} else {
					$(".pricemax").html("￥" + that.value9[1]);
				}
				$(".pricemin").html("￥" + that.value9[0]);
			},
			accordion(source, cityId, version, item) {
				var that = this;
				if(document.querySelector("#topopen").style.display == "none") {
					$(".list4 .housenav-accordion").css("top", "1.65rem");
				}
				if(item == 1) {
					if(that.accordionDH == true) {
						let _this = this;
						var ajaxSign = {
							"source": source, // string 是
							"cityId": cityId, //  string 是
							"version": that.version
						};
						let ajaxData = api.getAES(ajaxSign);
						//				数据调用
						api.GetBlocks(ajaxData)
							.then(res => {
								let ajaxdata = res.result;
								that.blocksData = ajaxdata;
								that.accordionDH = false;
								that.tiemDH = true;
								that.moreDH = true;
								that.RecommendDH = true;
								that.$refs.accordionF.style.animation = ".1s ease both accordionF";

								document.body.style.overflow = "hidden";
								document.querySelector("html").style.overflow = "hidden";
							})

					} else if(that.accordionDH == false) {
						$(".housenavitem").eq(item - 1).find("img").attr("src", "../assets/img/icon_drop_down.png")
						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4 .housenav-accordion").css("top", "2.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}

				if(item == 2) {
					if(that.tiemDH == true) {
						that.accordionDH = true;
						that.tiemDH = false;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";
						document.body.style.overflow = "hidden";
						document.querySelector("html").style.overflow = "hidden";
					} else if(that.tiemDH == false) {
						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4 .housenav-accordion").css("top", "2.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}
				//				更多筛选
				if(item == 3) {
					if(that.moreDH == true) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = false;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";
						//							获取特色标签
						var ajaxSign = {
							"source": source, // string 是
							"houseType": '1', //  string 是
						};

						let ajaxData = api.getAES(ajaxSign);
						//				数据调用
						api.GetHouseTags(ajaxData)
							.then(res => {
								let ajaxdata = res.result;
								that.tagsData = ajaxdata;
								//							获取设施
								var AmenityajaxData = {
									"source": source, // string 是
									"houseType": '1', //  string 是
								};
								let AajaxData = api.getAES(AmenityajaxData);
								//				数据调用
								api.GetHouseAmenity(AajaxData)
									.then(res => {
										let ajaxdata = res.result;
										that.AmenityData = ajaxdata;
										that.$nextTick(function() {
											that.swiperFun();
										})
										document.body.style.overflow = "hidden";
										document.querySelector("html").style.overflow = "hidden";
									})

							})

					} else if(that.moreDH == false) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4 .housenav-accordion").css("top", "2.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}

				}
				if(item == 4) {
					if(that.RecommendDH == true) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = false;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";

						document.body.style.overflow = "hidden";
						document.querySelector("html").style.overflow = "hidden";
					} else if(that.RecommendDH == false) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4 .housenav-accordion").css("top", "2.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}
			},

			swiperFun() {
				var swiper = new Swiper('.swiper-container', {
					slidesPerView: 5,
					spaceBetween: 30,
					centeredSlides: true
				});
			},
			blocksLLat(areaId, lat, lng, name, page) {
				var that = this;
				that.$emit("setval");
				that.$parent.areaId = areaId;
				that.$parent.lat = lat;
				that.$parent.lng = lng;
				that.$parent.page = page;
				if(that.accordionDH == false) {
					that.accordionDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				document.querySelector("#blocks").innerText = name;
				$("#Recommen").html("推荐排序");
				that.$parent.getlongHouseListdata = [];

				that.$emit('getlongHouseList', that.$parent.page);
			},
			getlat() {

				var _this = this
				var map, geolocation;
				AMap.service(['AMap.Geolocation'], function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						buttonPosition: 'RB'
					});
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', _this.onComplete); //返回定位信息
					AMap.event.addListener(geolocation, 'error', _this.onError); //返回定位出错信息
				})

			},
			onComplete(data) {
				var that = this;
				var str = ['定位成功'];
				that.lng = data.position.getLng();
				that.lat = data.position.getLat();

				if(data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

				let name = "我的附近";
				let areaId = "";
				let page = 1;
				that.getlongHouseListdata = [];
				that.blocksLLat(areaId, that.lat.toString(), that.lng.toString(), name, page);
				that.accordionDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
			},
			onError(data) {
				var that = this;
				that.accordionDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
				that.$dialog.toast({
					mes: "暂时无法获取您的位置",
					timeout: 1000
				});
			},

			//			出租类型选择
			housetypeitem(type) {
				if(type == 0) {
					$(".minsu").addClass("minsuactive typeactive");
					$(".danjian").removeClass("danjianactive  typeactive");
					$(".chuangwei").removeClass("chuangweiactive  typeactive");
				}
				if(type == 1) {
					$(".minsu").removeClass("minsuactive  typeactive");
					$(".danjian").addClass("danjianactive  typeactive");
					$(".chuangwei").removeClass("chuangweiactive  typeactive");
				}
			},
			//			户型选择
			layoutitem(i) {
				$(".layout-item").eq(i).addClass("more-item-active").siblings().removeClass("more-item-active");
			}, //			特色标签
			tagsitem(i) {
				if($(".tagsitem").eq(i).hasClass("layout-item-active")) {
					$(".tagsitem").eq(i).removeClass("layout-item-active")
				} else {
					$(".tagsitem").eq(i).addClass("layout-item-active")
				}

			}, //			设施筛选
			Amenityitemclick(i) {
				var that = this;
				if($(".hsc-list").eq(i).find("p").hasClass("hscl-icon-active")) {
					$(".hsc-list").eq(i).find("p").removeClass("hscl-icon-active")
					$(".hsc-list").eq(i).find(".hscl-icon").attr("src", that.AmenityData[i].grayIcon);
					$(".hsc-list").eq(i).find(".amenityID").remove();
				} else {
					$(".hsc-list").eq(i).find("p").addClass("hscl-icon-active")
					$(".hsc-list").eq(i).find(".hscl-icon").attr("src", that.AmenityData[i].redIcon);
					$(".hsc-list").eq(i).find("div").append("<span class='amenityID'>" + that.AmenityData[i].amenityId + "</span>")
				}
			},

			//			更多筛选关闭按钮
			morecolse() {
				var that = this;
				that.moreDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
			},
			//			更多筛选确定筛选
			moreok() {
				var that = this;
				that.$emit("setval");
				that.$parent.page = 1; //  string 否
				if($(".minsu").hasClass("minsuactive")) {
					that.$parent.house_type = '1'; // string 否 1 整租 2 合租
				}
				if($(".danjian").hasClass("danjianactive")) {
					that.$parent.house_type = '2'; // string 否 1 整租 2 合租
				}
				if($(".more-item-active").text() == "不限") {
					that.$parent.room = "";
				} else {
					that.$parent.room = $(".more-item-active").index() + 1; //  string 否 几室
				}
				that.price_bottom = that.value9[0]; //  string 否 低价
				that.price_top = that.value9[1]; //  string 否 顶价
				let amenityIdList_active = "";
				for(var i = 0; i < $(".amenityID").length; i++) {
					if(i == $(".amenityID").length - 1) {
						amenityIdList_active += $(".amenityID").eq(i).text();
					} else {
						amenityIdList_active += $(".amenityID").eq(i).text() + ",";
					}
				}
				that.$parent.equipment = amenityIdList_active; //  string 否
				let app_tag_active = "";
				for(var i = 0; i < $(".layout-item-active").length; i++) {
					if(i == $(".layout-item-active").length - 1) {
						app_tag_active += $(".layout-item-active").eq(i).text();
					} else {

						app_tag_active += $(".layout-item-active").eq(i).text() + ",";
					}
				}
				that.$parent.tags = app_tag_active; //  string 是 标签搜索， id用 ','隔开
				//				that.moreDH = true;
				//				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				if(that.moreDH == false) {
					that.moreDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				that.$parent.getlongHouseListdata = [];
				that.$emit('getlongHouseList', that.$parent.page);
			}, //			排序筛选
			RecommendDHitemclick(i) {
				var that = this;
				that.$parent.page = 1;
				$(".RecommendDH-item").eq(i).addClass("RecommendDH-item-active").siblings().removeClass("RecommendDH-item-active");
				$(".RecommendDH-item").eq(i).find(".yd-icon-checkoff").show().parents(".RecommendDH-item").siblings().find(".yd-icon-checkoff").hide();
				that.$parent.price_order = $(".RecommendDH-item-active").index().toString();
				if(that.RecommendDH == false) {
					that.RecommendDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				$("#Recommen").html($(".RecommendDH-item").eq(i).find("span").text());
				that.$parent.getlongHouseListdata = [];
				that.$emit('getlongHouseList', that.$parent.page);
			},
		}
	}
</script>

<style>
	/*筛选样式*/
	
	.list4 .amenityID {
		display: none;
	}
	
	.list4 .housenav-accordion .yd-flexbox-item {
		font-size: .28rem;
		padding: .24rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.list4 .housenav-accordion .yd-flexbox-item::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #d9d9d9;
	}
	
	.list4 .hntext {
		display: block;
		width: 1.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list4 .addressAcc {
		overflow-y: auto;
		position: absolute;
		top: 1rem;
		left: 0;
		right: 0;
	}
	
	.list4 .accordionDH-box {
		position: relative;
	}
	
	.list4 .housenav-accordion {
		position: fixed;
		top: 2.9rem;
		bottom: 50rem;
		left: 0;
		right: 0;
		background: #FFFFFF;
		z-index: 99;
		box-sizing: border-box;
		overflow-y: auto;
	}
	
	.list4 .myaddress {
		position: absolute;
		width: 100%;
		padding: 0 .24rem;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		line-height: .9rem;
		background: #fff;
		font-size: .28rem;
		z-index: 99;
	}
	
	@keyframes accordionF {
		from {
			bottom: 50rem;
			border-top: none;
		}
		to {
			bottom: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.05);
		}
	}
	
	@keyframes accordionD {
		from {
			bottom: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.05);
		}
		to {
			bottom: 50rem;
			border-top: none;
		}
	}
	/*入住时段*/
	
	.list4 .housenavitem #checkinout {
		height: initial !important;
		line-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	
	.list4 .housenavitem #startDate,
	.list4 .housenavitem #endDate {
		width: 1.3rem;
		display: none;
	}
	
	.list4 .housenavitem .mask_calendar {
		display: block;
		top: 3.1rem !important;
		background: none !important;
	}
	
	.list4 .housenavitem .headerWrapper {
		display: none !important;
	}
	
	.list4 .housenavitem .dateZone {
		margin-top: 0 !important;
	}
	
	.list4 .housenavitem .tbody {
		margin-top: .9rem;
	}
	
	.list4 .housenavitem .calendar {
		display: block !important;
		padding-bottom: 3rem;
		box-sizing: border-box;
	}
	/*更多推荐*/
	
	.list4 .el-slider__bar {
		background-color: #EF4F4F !important;
	}
	
	.list4 .el-slider__button {
		border-color: #EF4F4F;
		width: .48rem;
		height: .48rem;
	}
	
	.list4 .moreDH {
		padding: 0 .24rem 1rem .24rem;
		box-sizing: border-box;
	}
	
	.list4 .more-box {
		padding-bottom: .24rem;
		box-sizing: border-box;
	}
	
	.list4 .moreDH-title {
		font-size: .31rem;
		padding: .2rem 0;
		box-sizing: border-box;
	}
	
	.list4 .moreDH .mh-text {
		font-size: .24rem;
		color: rgb(239, 79, 79);
	}
	
	.list4 .moreDH .my-el-slider {
		padding: 0 .24rem !important;
		box-sizing: border-box;
	}
	
	.list4 .moreDH .yd-grids-3:before,
	.list4 .moreDH .yd-grids-item:after,
	.list4 .moreDH .yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before,
	.list4 .moreDH .yd-grids-2:before,
	.list4 .moreDH .yd-grids-2 .yd-grids-item:not(:nth-child(2n)):before,
	.list4 .moreDH .yd-flexbox-item::after,
	.list4 .moreDH .yd-grids-5 .yd-grids-item:not(:nth-child(5n)):before,
	.list4 .moreDH .yd-grids-5:before {
		display: none !important;
	}
	
	.list4 .moreDH .hscl-icon {
		max-width: .54rem;
		height: .4rem;
		color: #282828;
		font-size: .175rem;
	}
	
	.list4 .moreDH .hscl-icon-active {
		color: #E25051;
	}
	
	.list4 .moreDH .yd-grids-4 {
		padding: 0 .35rem .35rem .35rem;
		box-sizing: border-box;
	}
	
	.list4 .moreDH .hsc-list {
		font-size: .24rem;
		text-align: center;
		padding: .3rem 0;
	}
	
	.list4 .moreDH .hsc-list p {
		margin-top: .2rem;
	}
	
	.list4 .layout-item {
		display: inline-block;
		font-size: .28rem;
		text-align: center;
		padding: .1rem .2rem;
		box-sizing: border-box;
		border: 1px solid gainsboro;
		border-radius: 3px;
	}
	
	.list4 .tags .layout-item {
		padding: .1rem .2rem;
		box-sizing: border-box;
		margin: .16rem;
	}
	
	.list4 .layout-item-active {
		border-color: #E25051;
		color: #e25051;
	}
	
	.list4 .more-item-active {
		border-color: #E25051;
		color: #e25051;
	}
	/*出租类型*/
	
	.list4 .housetype-item span {
		text-align: center;
		display: block;
	}
	
	.list4 .chuangwei {
		background: url(../assets/img/bed2.png) no-repeat center;
	}
	
	.list4 .minsu {
		background: url(../assets/img/zhengzu.png) no-repeat center;
	}
	
	.list4 .chuangwei,
	.list4 .danjian,
	.list4 .minsu {
		width: 1.04rem;
		height: 1.04rem;
		margin: auto;
		background-size: .6rem;
		border: 2px solid #424242;
		border-radius: 50%;
		margin-bottom: .16rem;
	}
	
	.list4 .danjian {
		background: url(../assets/img/hezhu.png) no-repeat center;
		background-size: .5rem;
	}
	
	.list4 .minsuactive {
		background: #E25051 url(../assets/img/zhengzu1.png) no-repeat center;
		background-size: .6rem;
		border-color: #E25051;
	}
	
	.list4 .chuangweiactive {
		background: #E25051 url(../assets/img/bed1.png) no-repeat center;
		background-size: .6rem;
		border-color: #E25051;
	}
	
	.list4 .danjianactive {
		background: #E25051 url(../assets/img/hezhu1.png) no-repeat center;
		background-size: .5rem;
		border-color: #E25051;
	}
	/*底部按钮*/
	
	.list4 .moreDH-bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #eeeeee;
		box-sizing: border-box;
		padding: .24rem 0;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		background: white;
	}
	
	.list4 .mb-btn {
		display: block;
		width: 1.77rem;
		line-height: .69rem;
		background: #e25051;
		color: #fff;
		border-radius: 5px;
		margin: 0 0.2rem;
	}
	
	.list4 .mb-btn1 {
		float: right;
		background: #c4c4c4;
	}
	/*排序*/
	
	.list4 .RecommendDH-item {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		font-size: .28rem;
		padding: .24rem;
		border-bottom: 1px solid #eeeeee;
		box-sizing: border-box;
	}
	
	.list4 .RecommendDH-item-active {
		color: #e25051;
	}
	
	.list4 .RecommendDH-item .yd-icon-checkoff {
		font-size: .28rem !important;
	}
</style>